<template>
	<view>
		<!--头部-->
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">考试题目</view>
			<view class="right" @click="showCard">答题卡</view>
		</view>
		<!--顶部-->
		<view class="main-top">
			<view class="title">模拟考试</view>
			<view class="count flex-row">
				<view class="left flex-row">
					<image src="../../../static/img/education/timer.png"></image>
					<text>{{ time }}</text>
				</view>
				<view class="right flex-row">
					<text>{{ index+1 }}</text>
					<text>/ {{ list.length }}</text>
				</view>
			</view>
		</view>
		<!--试题-->
		<swiper @change="changeQuestion" :current="index" previous-margin="10upx" next-margin="10upx">
			<swiper-item v-for="(item, index) in list" :key="index">
				<view class="swiper-item">
					<view class="title">{{ item.type ? '选择题' : '判断题' }}（{{ item.point }}分/每题）</view>
					<view class="content">{{ item.question }}</view>
					<view class="title">选项</view>
					<!--选择题-->
					<view v-if="item.type" class="content check">
						<view class="flex-row" @click="selectAnswer(item, index, 'A')">
							<view class="label">A、{{ item.answer_A }}</view>
							<uni-icons v-show="anwsers[index].answer == 'A'" type="checkbox-filled" color="#51AEE6" size="24"></uni-icons>
							<uni-icons v-show="anwsers[index].answer != 'A'" type="circle" color="#ddd" size="24"></uni-icons>
						</view>
						<view class="flex-row" @click="selectAnswer(item, index, 'B')">
							<view class="label">B、{{ item.answer_B }}</view>
							<uni-icons v-show="anwsers[index].answer == 'B'" type="checkbox-filled" color="#51AEE6" size="24"></uni-icons>
							<uni-icons v-show="anwsers[index].answer != 'B'" type="circle" color="#ddd" size="24"></uni-icons>
						</view>
						<view class="flex-row" @click="selectAnswer(item, index, 'C')">
							<view class="label">C、{{ item.answer_C }}</view>
							<uni-icons v-show="anwsers[index].answer == 'C'" type="checkbox-filled" color="#51AEE6" size="24"></uni-icons>
							<uni-icons v-show="anwsers[index].answer != 'C'" type="circle" color="#ddd" size="24"></uni-icons>
						</view>
						<view class="flex-row" @click="selectAnswer(item, index, 'D')">
							<view class="label">D、{{ item.answer_D }}</view>
							<uni-icons v-show="anwsers[index].answer == 'D'" type="checkbox-filled" color="#51AEE6" size="24"></uni-icons>
							<uni-icons v-show="anwsers[index].answer != 'D'" type="circle" color="#ddd" size="24"></uni-icons>
						</view>
					</view>
					<!--判断题-->
					<view v-else class="content judge flex-row">
						<uni-icons @click="selectAnswer(item, index, '正确')" type="checkbox" v-show="anwsers[index].answer == '正确'" color="#51AEE6" size="60"></uni-icons>
						<uni-icons @click="selectAnswer(item, index, '正确')" type="checkbox" v-show="anwsers[index].answer != '正确'" color="#eeeeee" size="60"></uni-icons>
						<uni-icons @click="selectAnswer(item, index, '错误')" type="close" v-show="anwsers[index].answer == '错误'" color="#51AEE6" size="60"></uni-icons>
						<uni-icons @click="selectAnswer(item, index, '错误')" type="close" v-show="anwsers[index].answer != '错误'" color="#eeeeee" size="60"></uni-icons>
					</view>
					<!--结果-->
					<view v-if="anwsers[index].answer" class="result" :class="{error: item.right_answer != anwsers[index].answer}">
						{{ item.right_answer == anwsers[index].answer ? '回答正确' : `回答错误，正确答案 ${item.right_answer}` }}
					</view>
					<!--解析-->
					<view v-if="anwsers[index].answer" class="title">答案解析</view>
					<view v-if="anwsers[index].answer" class="content">{{ item.explain || '暂无答案解析' }}</view>
					<!--标签-->
					<view v-if="index < anwsers.length - 1" class="tag"> 《 左右滑动翻页 》 </view>
					<!--提交-->
					<view v-else class="tag btn"><button @click="submit" type="primary" size="mini">提交</button></view>
				</view>
			</swiper-item>
		</swiper>
		<!--答题卡-->
		<uni-popup ref="popup" type="bottom">
			<view class="answer-card">
				<view class="answer-card-title"><text>答题卡</text></view>
				<view class="answer-card-content">
					<view v-for="(item, index) in anwsers" :key="index">
						<view v-if="item.answer" @click="toQuestion(index)" class="item" :class="[item.is_right ? 'success' : 'error']">{{ index+1 }}</view>
						<view v-else @click="toQuestion(index)" class="item">{{ index+1 }}</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { date,secondsToFormatTime } from '@/common/function.js';
export default{
	components: { uniIcons,uniPopup },
	data(){
		return {
			isShowCard: false,
			index: 0,
			timer: null,
			time: '59:59',
			list: [],
			anwsers: [],
			userid: uni.getStorageSync('userid'),
			start_time: ''
		}
	},
	onLoad(option){
		// 获取试卷类型：imitate-模拟考试,formal-正式考试
		this.type = option.type;
		this.exam_id = option.id;
		
		// 开始计时
		this.countTime();
		
		// 记录开始时间
		let oDate = date();
		this.start_time = `${oDate.year}-${oDate.month}-${oDate.day} ${oDate.hours}:${oDate.minutes}:${oDate.seconds}`;
		
		// 获取试卷
		if(this.type == 'imitate') this.getImitates();
		if(this.exam_id) this.getOthers();
	},
	onHide(){
		clearInterval(this.timer);
	},
	onBackPress(){
		// 是否展开了答题卡
		if(this.isShowCard){
			this.$refs.popup.close();
			this.isShowCard = false;
			return true;
		}
		// 确认
		uni.showModal({
			title: '是否放弃考试',
			content: '放弃即取消本次考试!',
			success: (res)=>{
				console.log(this.type);
				if(res.confirm){
					let url = 'index';
					if(this.type == 2) url = 'formal';
					if(this.type == 3) url = 'daily';
					uni.redirectTo({url});
					return false;
				}
			}
		})
		return true;
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		// 倒计时
		countTime(){
			let _this = this;
			let seconds = 3599;
			_this.timer = setInterval(()=>{
				seconds--;
				let oTime = secondsToFormatTime(seconds);
				_this.time = `${oTime.minutes}:${oTime.seconds}`;
				if(seconds <= 0){
					return clearInterval(_this.timer);
				}
			}, 1000);
		},
		// 跳转到指定题目
		toQuestion(index){
			this.index = index;
			this.$refs.popup.close();
		},
		// 展示答题卡
		showCard(){
			this.isShowCard = true;
			this.$refs.popup.open();
		},
		// 切换题目
		changeQuestion(e){
			this.index = e.detail.current;
		},
		// 选择答案
		selectAnswer(item, index, answer){
			this.index = index;
			
			// 判断是否已经答题
			if(this.type == 'imitate' && this.anwsers[index].answer && this.anwsers[index].answer != answer){
				return uni.showToast({
					icon: 'none',
					title: '模拟考试不能修改答案'
				})
			}
			this.anwsers[index].answer = answer;
			this.anwsers[index].is_right = item.right_answer == answer ? 1 : 0;
		},
		// 提交答案
		submit(){
			let _this = this;
			uni.showModal({
				title: '是否提交答题卡?',
				content: '提交即结束答题',
				success: (res)=>{
					if(res.confirm){
						// 校验是否全部答题完毕
						let noAnswers = _this.anwsers.filter(item=>!item.answer);
						if(noAnswers.length){
							uni.showModal({
								title: '还有题目没有作答，是否先完成所有答题？',
								content: '提交答题则结束考试!',
								cancelText: '继续答题',
								confirmText: '确认提交',
								success: (ress)=>{
									if(ress.confirm){
										// 提交答题
										_this.type == 'imitate' ? _this.submitImitate() : _this.submitAction();
									}
								}
							})
						}
					}
				}
			})
		},
		// 非模拟考试提交
		submitAction(){
			let _this = this;
			uni.showLoading({title:'提交中'});
			uni.request({
				url: this.$API.edutExamFormalSubmit,
				data: {
					userid: this.userid,
					start_time: this.start_time,
					detail: JSON.stringify(this.anwsers),
					type: this.type,
					exam_id: this.exam_id
				},
				method: 'POST',
				header: this.$API.get_head(),
				success: (res)=>{
					uni.hideLoading();
					if(res.data.code == 0){
						uni.showToast({
							icon: 'none',
							title: '提交成功'
						});
						setTimeout(()=>{
							uni.setStorageSync('exam_result_data', res.data.data);
							uni.navigateTo({url: 'result'})
						}, 1000);
					}
				},
				fail: ()=>{
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '提交失败'
					})
				}
			})
		},
		// 提交模拟考试
		submitImitate(){
			let _this = this;
			uni.showLoading({title:'提交中'});
			uni.request({
				url: this.$API.edutExamImitateSubmit,
				data: {
					userid: this.userid,
					start_time: this.start_time,
					detail: JSON.stringify(this.anwsers)
				},
				method: 'POST',
				header: this.$API.get_head(),
				success: (res)=>{
					uni.hideLoading();
					if(res.data.code == 0){
						uni.showToast({
							icon: 'none',
							title: '提交成功'
						});
						setTimeout(()=>{
							uni.setStorageSync('exam_result_data', res.data.data);
							uni.navigateTo({url: 'result'})
						}, 1000);
					}
				},
				fail: ()=>{
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '提交失败'
					})
				}
			})
		},
		// 模拟考试
		getImitates(){
			let _this = this;
			uni.showLoading({title:'加载中'});
			uni.request({
				url: this.$API.edutExamImitateList,
				header: this.$API.get_head(),
				success: (res)=>{
					uni.hideLoading();
					_this.list = res.data.data;
					if(!_this.list.length){
						uni.showToast({
							icon: 'none',
							title: '暂无题目'
						})
						setTimeout(()=>{
							uni.redirectTo({
								url: 'index'
							})
						}, 1000)
						return
					}
					
					// 生成答案
					_this.anwsers = _this.list.map(item=>{
						return {
							answer: '',
							exam_id: item.id,
							is_right: 0,
							point: item.point,
							right_answer: item.right_answer
						}
					});
				},
				fail: ()=>{
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '加载失败'
					})
				}
			})
		},
		// 非模拟考试
		getOthers(){
			let _this = this;
			uni.showLoading({title:'加载中'});
			uni.request({
				url: this.$API.edutExamFormalDetail,
				data: {
					userid: this.userid,
					exam_id: this.exam_id
				},
				header: this.$API.get_head(),
				success: (res)=>{
					uni.hideLoading();
					_this.list = res.data.data;
					
					// 生成答案
					_this.anwsers = _this.list.map(item=>{
						return {
							answer: '',
							exam_id: item.id,
							is_right: 0,
							point: item.point,
							right_answer: item.right_answer
						}
					});
				},
				fail: ()=>{
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '加载失败'
					})
				}
			})
		}
	}
}
</script>

<style scoped>
.status_bar{
	width: 100%;
	height: var(--status-bar-height);
	background: #fff;
}

.btn{
	text-align: center;
	padding-top: ;
}
.btn button{
	width: 240upx;
}

.title{
	font-size: 32upx;
	font-weight: bold;
	text-indent: 24upx;
	position: relative;
}
.title::before{
	content: '';
	width: 6upx;
	height: 30upx;
	background: #5F96F2;
	position: absolute;
	top: 14upx;
	left: 0;
}

/*答题卡*/
.answer-card{
	height: 500upx;
	background: #fff;
}
.answer-card-title{
	height: 70upx;
	line-height: 70upx;
	font-size: 32upx;
	text-align: center;
	position: relative;
}
.answer-card-title text::before,
.answer-card-title text::after{
	content: '';
	width: calc(50% - 120upx);
	height: 2upx;
	background: #ccc;
	position: absolute;
	top: 50%;
}
.answer-card-title text::before{
	left: 60upx;
}
.answer-card-title text::after{
	right: 60upx;
}
.answer-card-content{
	height: calc(100% - 70upx);
	overflow: hidden;
	padding: 20upx 20upx 0;
}
.answer-card-content>view{
	float: left;
	margin: 0 20upx 20upx 0;
	width: calc((100% - 180upx) / 10);
	height: 60upx;
}
.answer-card-content>view:nth-child(10n){
	margin-right: 0;
}
.answer-card-content .item{
	width: 100%;
	height: 100%;
	line-height: 60upx;
	color: #fff;
	background: #999;
	font-size: 26upx;
	text-align: center;
}
.answer-card-content .item.success{
	background: #51AEE6;
}
.answer-card-content .item.error{
	background: red;
}

/*滑动*/
swiper{
	margin: 12upx 0;
	height: calc(100vh - 120upx - 24upx - 88upx - var(--status-bar-height));
}
swiper swiper-item .swiper-item{
	height: 100%;
	background: #fff;
	overflow-y: auto;
	margin-right: 10upx;
	border-radius: 10upx;
	box-sizing: border-box;
	border: 2upx solid #EEE;
	padding: 24upx 20upx 160upx;
	box-shadow: 2upx 4upx 4upx #eee;
	position: relative;
}
swiper swiper-item .swiper-item .tag{
	width: 100%;
	color: #999;
	height: 60upx;
	line-height: 60upx;
	font-size: 32upx;
	text-align: center;
	position: fixed;
	bottom: 60upx;
	left: 0;
}
swiper swiper-item .swiper-item .result{
	color: #51AEE6;
	margin: 10upx 0;
	font-size: 32upx;
}
swiper swiper-item .swiper-item .result.error{
	color: red;
}
swiper swiper-item:last-child .swiper-item{
	margin-right: 0;
}
swiper swiper-item .swiper-item .title{
	font-weight: normal;
}
swiper swiper-item .swiper-item .content{
	color: #666;
	font-size: 30upx;
	margin-bottom: 10upx;
}
swiper swiper-item .swiper-item .content.judge{
	justify-content: center;
}
swiper swiper-item .swiper-item .content.judge uni-icons,
swiper swiper-item .swiper-item .content.judge .uni-icons{
	margin: 0 30upx;
}
swiper swiper-item .swiper-item .content.check>view{
	border-bottom: 2upx solid #ccc;
}
swiper swiper-item .swiper-item .content.check>view .label{
	color: #333;
	font-size: 32upx;
}

/*顶部*/
.main-top{
	padding: 0 30upx;
	height: 120upx;
	background: #fff;
}
.main-top .left image{
	width: 40upx;
	height: 40upx;
	margin-right: 10upx;
}
.main-top .left text{
	color: red;
	font-size: 24upx;
}
.main-top .right text:first-child{
	color: red;
	font-size: 36upx;
	font-weight: bold;
	margin-top: -4upx;
	margin-right: 10upx;
}
.main-top .right text:last-child{
	font-size: 24upx;
}
</style>
